<template>
	<view class="ticket-holder">
		<u-sticky>
			<u-tabs :list="tabsList" lineColor="#0E9698 " :activeStyle="{
          color: '#0E9698 ',
        }" :inactiveStyle="{
          color: '#353535',
        }" :lineWidth="30" :current="currentTab" @click="onClickTab" />
		</u-sticky>
		<view class="list" v-if="list.length">
			<view v-if="currentTab === 0">
				<!-- :style="{ backgroundImage: `url(${assetsPath}${'20231120/1169a766a1feba85de7cebaade10634a'}.png)` }" -->
				<view class="card-pack-item pr"
					style="color: #000000;
					width: 690rpx;
					height: 280rpx;
					background: linear-gradient(180deg, rgba(14, 150, 152, 0.2) 0%, rgba(14, 150, 152, 0) 100%);
					border-radius: 10rpx;
					border: 1rpx solid;
					border-image: linear-gradient(180deg, #0fadad, rgba(75, 166, 119, 0.4)) 1 1;
					margin-top: 30rpx;"
					v-for="item in list" :key="item.id" >
					<view class="flex-align" style="width: 688rpx;height: 80rpx;
    background: linear-gradient(135deg, #11cbcb 0%, #0fadad 100%), #0E9698;">
						<view style="margin-left: 13rpx;color: #fff;">{{item.venue_name}}</view>
					</view>
					<view>
						<view
							style="width: 100rpx; height: 100rpx;margin-left: 88%;margin-top: -70rpx;">
							<view class="qrcode" @click="goQrcode(item)">
								<u-image :src="picture" width="52rpx" height="52rpx"></u-image>
							</view>
						</view>
						<view @click="$emit('click')">
							<view class="flex-align">
								<view
									style=" width: 100rpx; height: 40rpx;background-color: aliceblue;border-radius:10rpx;color: #ffaa00 ;font-size: 26rpx;text-align: center;line-height: 40rpx;"
									v-if="item.inventory === 0"><text>预约</text> </view>
								<view class="name" style="color: #0E9698;">{{item.ticket_name}}</view>
							</view>
							<view class="flex-align">
								<view class="name" style="margin-top: 20rpx;font-size: 26rpx;">no.{{item.qr_code}}</view>
							</view>
							<view class="flex-between bottom">
								<view>
									数量1次
								</view>
								<view class="date">{{item.deadline}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view v-if="currentTab === 1">
				<!-- :style="{ backgroundImage: `url(${assetsPath}${'20231120/00c8f9ef9576bc969c9bc4ef1b9b98c1'}.png)` }" -->
				<view class="card-pack-item pr" style="color: #fff;width: 690rpx;height: 280rpx;
					background: linear-gradient(180deg, rgba(179, 179, 179, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
					    border-radius: 10rpx;border: 1rpx solid;
					    border-image: linear-gradient(180deg, #a6a6a6, rgba(166, 166, 166, 0.4)) 1 1;margin-top: 30rpx;"
					v-for="item in list" :key="item.id" >
					<view class="flex-align"  style="width: 688rpx;height: 80rpx;
							background: linear-gradient(135deg, #BFBFBF 0%, #A6A6A6 100%), #A6A6A6;">
						<view style="margin-left: 13rpx;color: #cecece ;">{{item.venue_name}}</view>
					</view>
					<view>
						<view class="" style="width: 100rpx; height: 100rpx;margin-left: 88%;margin-top: -70rpx;">
						</view>
						<view>
							<view class="flex-align">
								<view
									style=" width: 100rpx; height: 40rpx;background-color: aliceblue;border-radius:10rpx;color: #cecece ;font-size: 26rpx;text-align: center;line-height: 40rpx;"
									v-if="item.inventory === 0"><text>预约</text> </view>
								<view class="name" >{{item.ticket_name}}</view>
							</view>
							<view class="flex-align">
								<view class="name" style="margin-top: 20rpx;color: #cecece ;">no.{{item.qr_code}}</view>
							</view>
							<view class="flex-between bottom" style="color: #cecece ;">
								<view>
									数量1次
								</view>
								<view class="date">{{item.deadline}}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="card-pack-item pr" v-if="item.zt == 1"
					:style="{ backgroundImage: `url(${assetsPath}${'9fdd5512f7b4ea94c303930e3ce0264f0f1595c5'}.png)` }"
					v-for="item in list" :key="item.id">
					<view class="flex-align">
						<u-image :src="`${assetsPath}f0d9a5af94d5830bf6b6e97ce69eddd62415923d.png`" width="30rpx"
							height="30rpx" shape="square"></u-image>
						<view style="margin-left: 13rpx;">场馆名称</view>
					</view>
					<view>
						<view class="" style="width: 100rpx; height: 100rpx;margin-left: 88%;margin-top: -70rpx;">
						</view>
						<view>
							<view class="flex-align">
								<view
									style=" width: 100rpx; height: 40rpx;background-color: aliceblue;border-radius:10rpx;color: #cecece ;font-size: 26rpx;text-align: center;line-height: 40rpx;"
									v-if="item.inventory === 0"><text>预约</text> </view>
								<view class="name">票名</view>
							</view>
							<view class="flex-align">
								<view class="name" style="margin-top: 20rpx;">no.{{ item.ticket_no }}</view>
							</view>
							<view class="flex-between bottom">
								<view v-if="item.yxq != '长期有效'">
									{{item.days}}次
								</view>
								<view v-else></view>
								<view class="date" v-if="item.is_yxq != null">{{ item.yxq }}</view>
								<view class="date" v-if="item.is_yxq == null && item.inventory == 1">长期有效</view>
							</view>
						</view>
					</view>
				</view> -->
			</view>
		</view>
		<u-empty v-else text="暂无数据" icon="http://cdn.uviewui.com/uview/empty/data.png" />
	</view>
</template>

<script>
	const index = require("@/api/index/index.js");
	export default {
		data() {
			return {
				assetsPath: this.$https.assetsPath,
				currentTab: 0,
				tabsList: [{
						name: "待使用"
					},
					// {
					// 	name: "待结账"
					// },
					{
						name: "已结束"
					}
				],
				list: [],
				listQuery: { //分页
					limit: 5,
					page: 1,
				},
				totalPage: "",
				picture: this.$https.assetsPath + "20231120/714febf033f24564bd4620630796b87a.png",

			};
		},
		onLoad(options) {
			this.getTicketList();
		},
		methods: {
			goQrcode(item) {
				// uni.navigateTo({
				// 	url: `/pages/personal/qrcode/qrcode?goods_name=${item.goods_name}&ticketno=${item.ticket_no}&title=我的票包&choose=选择票&goods_image=${item.goods_image}`
				// })
				uni.navigateTo({
					url:'/pages_other/ewm_ticket/ewm_ticket?id=' + item.id
				})
			},
			// 日期加指定天数
			addDate(date, days) {
				let date1 = new Date(date);
				date1.setDate(date1.getDate() + days);
				let month = date1.getMonth() + 1;
				let day = date1.getDate();
				let year = date1.getFullYear();
				if (month < 10) {
					month = "0" + month;
				}
				if (day < 10) {
					day = "0" + day;
				}
				return year + "-" + month + "-" + day;
			},
			onClickTab({
				index
			}) {
				this.currentTab = index;
				this.list = []
				this.listQuery.page = 1
				if (index == 0) {
					this.getTicketList()
				} else{
					this.bill_ticketno()
				}
			},
			// 获取票据列表 未使用
			async getTicketList() {
				let that = this;
				if (this.listQuery.page === 1) that.list = [];
				let postData = {
					page: this.listQuery.page,
					limit: this.listQuery.limit,
				};
				let res = await index.bill_ticket(postData);
				if (res.code === 1) {
					this.list = this.list.concat(res.data.rows); //将数据拼接在一起
					that.totalPage = res.data.last_page
				}else if(res.code == -1){
					uni.showToast({
						title: res.msg,
						duration: 1000,
						icon: 'none'
					});
					setTimeout(()=>{
						wx.clearStorageSync()
						wx.clearStorage()
						uni.switchTab({
							url: '/pages/personal/personal', //跳去登录页
						})
					},2000) 
				}
			},
			// 获取票据列表 已使用
			async bill_ticketno() {
				let that = this;
				if (this.listQuery.page === 1) that.list = [];
				let postData = {
					page: this.listQuery.page,
					limit: this.listQuery.limit,
				};
				let res = await index.bill_ticketno(postData);
				if (res.code === 1) {
					this.list = this.list.concat(res.data.rows); //将数据拼接在一起
					that.totalPage = res.data.last_page
				}
			},
			// 下拉刷新
			onReachBottom() {
				if (this.totalPage <= this.listQuery.page) {
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.page += 1;
				if (this.currentTab == 0) {
					this.getTicketList()
				} else{
					this.bill_ticketno()
				}
			}

		},
	};
</script>

<style lang="scss" scoped>
	.ticket-holder {
		padding-bottom: env(safe-area-inset-bottom);
		background-color: rgb(249, 249, 249);
		min-height: 100vh;

		/deep/.u-tabs {
			background-color: #fff;
			border-bottom: 1px solid #e5e5e5;

			.u-tabs__wrapper__nav__item {
				flex: 1;
			}

			.u-tabs__wrapper__nav__line {
				bottom: 0;
			}
		}

		.list {
			padding: 30rpx;
		}

		card-pack-item+card-pack-item {
			.card-pack-item {
				margin-top: 30rpx;
			}
		}

		.card-pack-item {
			color: #000000;
			width: 690rpx;
			height: 296rpx;
			// padding: 18rpx 30rpx 50rpx 18rpx;
			background-position: left top;
			background-repeat: no-repeat;
			background-size: 100% 100%;

			&+.card-pack-item {
				margin-top: 30rpx;
			}

			&.lapse {

				.bottom,
				.balance {
					color: #000000 !important;
				}
			}

			.number {
				text {
					font-size: 36rpx;
					font-weight: bold;
				}
			}

			.name {
				font-size: 32rpx;
				padding-left: 15rpx;
			}

			.bottom {
				color: #666666 !important;
				font-size: 26rpx;
				padding: 20rpx 15rpx 0 15rpx;

				.balance {
					font-size: 48rpx;
					color: #000000 !important;
					margin-right: 10rpx;
					font-weight: bold;
				}
			}

			.qrcode {
				position: absolute;
				right: 10rpx;
				top: 10rpx;
			}
		}



		.item {
			padding: 20rpx 30rpx;
			position: relative;
			height: 290rpx;
			background-color: #0E9698 ;
			// filter: drop-shadow(0px 13rpx 57rpx rgba(8,73,162,0.11));
			border-radius: 20rpx;

			&+.item {
				margin-top: 30rpx;
			}

			&::after,
			&::before {
				content: "";
				position: absolute;
				top: 192rpx;
				border-radius: 50%;
				background-color: rgb(249, 249, 249);
				width: 30rpx;
				height: 30rpx;
				z-index: 1;
			}

			&::after {
				left: -15rpx;
			}

			&::before {
				right: -15rpx;
			}

			.line {
				top: 207rpx;
				left: 0;
				border-top: 1rpx dashed #000000;
				width: 100%;
			}

			.name {
				font-size: 40rpx;
				font-weight: bold;
				margin: 10rpx 0;
				color: #000000;

				.ticketName {
					width: 611rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.round {
					width: 20rpx;
					height: 20rpx;
					margin-right: 11rpx;
					background-color: #0E9698;
					border-radius: 50%;
				}
			}

			.minute {
				line-height: 34rpx;
				font-size: 26rpx;
				color: #000000;

				text {
					font-size: 44rpx;
				}
			}

			.expiration {
				font-size: 28rpx;
				color: #000000;
			}

			.bottom {
				font-size: 28rpx;
				margin-top: 40rpx;
				color: rgb(153, 153, 153);
			}

			.qrcode {
				right: 10rpx;
				top: 10rpx;
			}
		}


	}

	.disbled-ticket {
		// opacity: 0.6;
	}
</style>